<template>
   <div class="main">
     <!--{{message}}&lt;!&ndash; 输出data中的变量 可以直接使用{{}} 也可以使用v-model&ndash;&gt;-->
     <!--<input v-model="message">-->
     <el-table :data="courses" :row-class-name="tableRowClassName">
       <el-table-column  label="头像" width="80">
         <template slot-scope="scope">
           <img :src="getImgUrl(scope.row.imgsrc)" style="width:40px;height: 40px">
         </template>
       </el-table-column>
       <el-table-column prop="cno" label="课程编号" width="80"/>
       <el-table-column prop="cname" label="课程名称" width="160"/>
       <el-table-column prop="cdesc" label="描述" width="200"/>
       <el-table-column prop="grade" label="开设学期" width="80"/>
       <el-table-column prop="imgs" label="预览" width="80" style="position: relative">
         <template slot-scope="scope">
           <div v-for="(img,index) in getImgArray(scope.row.imgs)">
              <img class="courseImg" :src="getImgUrl(img)" style="width: 40px;height: 40px;position:absolute;border-radius: 20px;top: 15px;left:0"/>
           </div>
         </template>
       </el-table-column>

       <el-table-column label="操作">
         <template slot-scope="scope">
           <el-button
             size="mini"
             @click="handleEditCourse(scope.$index, scope.row)">编辑</el-button>
           <el-button
             size="mini"
             type="danger"
             @click="handleDelete(scope.$index, scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <el-pagination
       background
       layout="prev, pager, next"
       @current-change="currPageChange"
       :current-page.sync="currPage"
       :pageSize="pageInfo.pageSize"
       :total="pageInfo.itemCount">
     </el-pagination>
     <addCourse :addDialogIsShow="addDialogIsShow" @closeAddDialog="closeAddDialog" ref="showAddCourse"/>
     <editCourse :editDialogIsShow="editDialogIsShow" @closeEditDialog="closeEditDialog" ref="showEditCourse"/>
     <el-button @click="showAddCourse">新增课程</el-button>
   </div>


</template>
<script>
    import api from "../../../../axios/api.js"
    import * as fecha from "element-ui/lib/utils/date";
    import utilsFD from "../../../../static/js/utils/index.js"
    import addCourse from '@/components/back/course/add.vue'
    import editCourse from '@/components/back/course/edit.vue'
    import $ from 'jquery'
    export default {//default是一个对象，有很多成员变量，其中一个是name 另外一个是data函数（变量名为data，值为返回值的成员变量）
        name: "list",
      components:{addCourse,editCourse},
        data(){//data是一个函数，返回值是一个对象（对象有很多成员变量 就可以定义很多值提供给vue使用）
          return {
            courses:[],
            message:'123',
            currPage:1,
            pageInfo:{},
            addDialogIsShow : false,//默认增加子组件不现实
            editDialogIsShow : false//默认增加子组件不现实
          }
        },
        methods:{
          getImgUrl: function (imgsrc) {
            return "/api/upload/course/" + imgsrc;
          },
          dateFormat(row, column, cellValue) {
            return utilsFD.FD.Fd().dateFormatCN(cellValue,'yyyy-MM-dd',fecha);
          },
          getCourseByPage:function () {
             api.setDataFromAxios("/api/TestWeb/courseController/getCourseByPage",{"currPage":this.currPage,"pageSize":this.pageInfo.pageSize},"post",null).then(
               //默认返回就是response对象
               dto=>{
                 console.log(dto);
                  this.courses = dto.tList;
                  this.pageInfo = dto.obj;
               }
             );
          },
          currPageChange:function () {
            this.getCourseByPage();//当用户选择页码，选中的页码自动同步给currPage，再调用重新分页查询当前页方法
          },
          tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 == 0) {
              return 'warning-row';
            } else {
              return '';
            }
            return '';
          },

          closeAddDialog(){
            this.addDialogIsShow = false;
          },
          closeEditDialog(){
            this.editDialogIsShow = false;
            this.getCourseByPage();
          },
          showAddCourse(){
            this.addDialogIsShow = true;
          },
          showEditCourse(){
            this.editDialogIsShow = true;
          },

          handleEditCourse(index,course){
            let _this = this;//检查点,判断子组件的init方法是否被正确调用
            console.log(course.sno);
            this.$nextTick(()=>{
              _this.$refs.showEditCourse.initEditCourse(course);
            });
            this.editDialogIsShow = true;//修改父组件变量 设置给子组件显示
          },
          //将图片地址按,分隔成数组
          getImgArray(imgs){
            return imgs==null||imgs==''?[]:imgs.split(",");
          }
        },
        created() {
           this.getCourseByPage();
        },
      watch: {//watch 用于监控当前页面的变量的值变化 如果直接调用方法是渲染前的界面，使用this.nextTick 中的方法才是渲染完成后调用
        courses:{
          handler(val, oldVal){
            this.$nextTick(function() {
              //alert($('.courseImg').size());
              $('.courseImg').each(function (i, courseImg) {
                $(courseImg).css("z-index", i).css("left", (i * 15) + 'px');
              });
            })

          },
          deep:true//打开深度监听
        },

      }
      // data:function () {
        //   return {
        //     message:'abc'
        //   }
        // }
    }
</script>

<style scoped lang="stylus">
  .main
   width 1000px
   margin 0 auto
  /deep/ table
          text-align center
          width 700px
          margin 0 auto
/deep/ .warning-row  /*不写deep渲染出错*/
  background-color oldlace
</style>
